<template>
  <div id="shouye">

    <!-- 头部导航栏-->
    <div class="navgd">
      <el-row class="top">
        <el-col :span="12" class="zuo">
          <el-row style="margin-top: 10px;">
            <el-col :span="2" :offset="1">
              <router-link to="/"><a>商城</a></router-link>
            </el-col>
            <el-col :span="2">
              <a>MIUI</a>
            </el-col>
            <el-col :span="2">
              <a>loT</a>
            </el-col>
            <el-col :span="2">
              <a>云服务</a>
            </el-col>
            <el-col :span="2">
              <a>天星数科</a>
            </el-col>
          </el-row>
        </el-col>
        <el-col class="you" :span="12">
          <el-row style="margin-top: 10px;">
            <el-col :span="2" :offset="17">
              <el-dropdown>
                <a><i class="el-icon-user"></i>我的</a>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-if="user.id!=null">
                    <el-link type="info" @click="goUserMain">用户中心</el-link>
                  </el-dropdown-item>

                  <!--商户-->
                  <el-dropdown-item v-if="user.commercialState==1">
                    <router-link to="/home"><el-link type="info">商户管理</el-link></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.commercialState==null">
                    <router-link to="/apply_for_commercial"><el-link type="info">我要成为商户</el-link></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.commercialState==0">
                    <router-link to="/apply_for_supplier"><el-link type="info">申请商户审核等待中...</el-link></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.commercialState==2">
                    <router-link to="/apply_for_supplier"><el-link type="info">申请商户被拒绝，点击我可再次申请</el-link></router-link>
                  </el-dropdown-item>

                  <!--供应商-->
                  <el-dropdown-item v-if="user.id!=null && user.supplierState==1">
                    <router-link to="/home"><el-link type="info">供应商管理</el-link></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.supplierState==null">
                    <router-link to="/apply_for_supplier"><el-link type="info">我要成为供应商</el-link></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.supplierState==0">
                    <el-link type="info">申请供应商审核等待中...</el-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.supplierState==2">
                    <router-link to="/apply_for_supplier"><el-link type="info">申请供应商被拒绝，点击我可再次申请</el-link></router-link>
                  </el-dropdown-item>

                  <el-dropdown-item v-if="user.id==null">
                    <router-link to="/Login"><el-link type="info">登录</el-link></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null">
                    <span @click="logout"><el-link type="info">退出</el-link></span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="3">
              <el-badge :value="cartnum" class="item">
                <button @click="tzgwcar" class="catcss">购物车</button>
              </el-badge>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <!--搜索-->
    <el-row style="margin-top: 50px">
      <div class="searchkuang">
        <el-col :span="6" :offset="1">
          <img style="width: 200px;height: 120px" src="../jiangzhipeng/images/logoico.jpg">
        </el-col>
        <el-col :span="12" style="margin-top: 40px">
          <el-input v-model="searchtxt" style="width:500px" placeholder="请输入内容" clearable></el-input>
          <el-button type="info" icon="el-icon-search" @click="searchipt(searchtxt)">搜索</el-button>
        </el-col>
      </div>
    </el-row>

    <!--主体部分-->
    <div class="shopbody">
      <div class="sh111"></div>
      <el-row>
        <el-col :span="22" :offset="1">

          <div class="shoprq">

            <el-row style="margin-top: 20px">

              <!--商品分类-->
              <el-col :span="4">
                <el-row>
                  <el-col :span="12" :offset="6">
                    <span style="color: #ff6600;font-size: 18px">商品分类</span>
                  </el-col>
                </el-row>

                <div class="shopfenlei">
                  <el-row style="margin-top: 8px" v-for="(s,index) in shoptypes">
                    <el-col :span="19" :offset="5">
                      <div :style="{'display':index%2==0?'inline':'none'}">
                        <label v-if="index+1<shoptypes.length && index%2==0 && index<16">
                          <a v-if="index%1==0" @click="fenlentzshopXq(s.id)">{{s.name}}</a>
                          <span style="color: #909399">/</span>
                          <a @click="fenlentzshopXq(shoptypes[index+1].id)">{{shoptypes[index+1].name}}</a>
                        </label>
                      </div>
                    </el-col>
                  </el-row>
                </div>

                <el-row>
                  <el-col :span="10" :offset="5">
                    <el-link type="info" @click="fenlentzshopXq('')">查看更多></el-link>
                  </el-col>
                </el-row>
              </el-col>

              <!--热门商品走马灯-->
              <el-col :span="18" style="margin-top: 20px">
                <el-carousel :interval="4000" type="card" height="300px">
                  <el-carousel-item v-for="i in zmdimg" :key="i">
                    <el-image :src="i" class="zmdimg"></el-image>
                  </el-carousel-item>
                </el-carousel>
              </el-col>

            </el-row>

            <!--分割线-->
            <el-row style="margin-top: 20px">
              <el-col :span="24">
                <el-divider></el-divider>
              </el-col>
            </el-row>

            <!--商品列表 猜你喜欢-->
            <el-row style="margin-top: 20px">
              <el-col>
                <span style="font-size: 24px">猜你喜欢</span>
                <span style="color: white; font-size: 14px;background-color: #ff6600">个性推荐</span>
              </el-col>
            </el-row>
            <div style="margin-top: 20px">
            <el-row :gutter="20">
              <div v-for="(s,index) in shops" @click="tztjgwcar(s.id)">
                <el-col :span="6" class="shopsItem">
                  <el-card shadow="hover" class="cardys">
                    <el-image class="rmshopimg"
                      :src="s.imags[0].imagUrl"
                      fit="fill"></el-image>
                    <div align="center">{{s.shopName}}</div>
                    <el-row style="margin-top: 5px">
                      <el-col :span="6" :offset="1">
                        <span style="color: red">￥{{s.shopPrice}}</span>
                      </el-col>
                      <el-col :span="6" :offset="8">
                        <span style="color: grey;font-size: 9px;">库存:{{s.shopUpnum}}</span>
                      </el-col>
                    </el-row>
                    <div style="margin-top: 5px">
                      <el-link TYPE="danger" style="float:right" class="el-icon-shopping-cart-1" @click.stop="addCart(s.id)">加入购物车</el-link>
                    </div>
                  </el-card>
                </el-col>
              </div>
            </el-row>
            <el-divider><i style="color: #B0B0B0" class="el-icon-zoom-in" @click="fenlentzshopXq('')"><el-link type="info">查看更多></el-link></i></el-divider>
            </div>

          </div>
        </el-col>
      </el-row>
    </div>

    <div class="sh111"></div>

    <!--底部-->
    <div class="site-footer">
      <div class="wenzitiao">
        <div class="wenzitiaoxia" style="margin-top: 20px">
          <a><img class="img1" src="../jiangzhipeng/images/字1.png" alt="图片出错" width="24px" height="24px">预约维修服务
          </a>
          <a><img class="img2" src="../jiangzhipeng/images/字2.png" alt="图片出错" width="24px" height="24px">7天无理由退货
          </a>
          <a><img class="img3" src="../jiangzhipeng/images/字3.png" alt="图片出错" width="24px" height="24px">15天免费换货
          </a>
          <a><img class="img4" src="../jiangzhipeng/images/字4.png" alt="图片出错" width="24px" height="24px">满69包邮（米粉节特惠） </a>
          <a class="shebian">
            <img class="img5" src="../jiangzhipeng/images/字5.png" alt="图片出错" width="24px" height="24px">520余家售后网点
          </a>
        </div>
      </div>
      <div class="zuihouxiaozi">
        <div class="zuihouxiaozizi">
          <a>小米商城 |</a>
          <a>MIUI |</a>
          <a>米家 |</a>
          <a>米聊 |</a>
          <a>多看 |</a>
          <a>游戏 |</a>
          <a>政企服务 |</a>
          <a>小米天猫店 |</a>
          <a>小米集团隐私政策 |</a>
          <a>小米公司儿童信息保护规则 |</a>
          <a>小米商城隐私政策 |</a>
          <a>小米商城用户协议 |</a>
          <a>问题反馈 |</a>
          <a>Select Location</a>
          <br>
          <a>北京互联网法院法律服务工作站 |</a>
          <a>中国消费者协会 |</a>
          <a>北京市消费者协会</a>
          <br>
          <span>@</span>
          <a>mi.com</a>
          <span>京ICP备10046444号</span>
          <a>京公网安备11010802020134号</a>
          <a>京网文[2020]027-042号</a>
          <br>
          <a>（京）网械平台备字（2018）第00005号</a>
          <a>互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
          <a>营业执照</a>
          <a>医疗器械质量公告</a>
          <br>
          <a>增值电信业务许可证</a>
          <span>网络食品经营备案</span>
          <span>京食药网食备202010048</span>
          <a>食品经营许可证</a>
          <br>
          <span>违法和不良信息举报电话：171-5104-4404</span>
          <a>知识产权侵权投诉</a>
          <span>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //导入css样式
  require("./css/common.css")

  export default {
    name: "indexShop",
    data() {
      return {
        searchtxt:"",
        zmdimg: [require("../jiangzhipeng/images/sjx4-1.jpg"), require("../jiangzhipeng/images/sjx4-2.jpg"), require("../jiangzhipeng/images/sjx4-3.jpg"), require("../jiangzhipeng/images/sjx4-4.jpg"),
          require("../jiangzhipeng/images/sjx4-5.jpg"), require("../jiangzhipeng/images/sjx4-6.jpg")],
        user:{
          id:sessionStorage.getItem('id')
          },
        shoptypes:[],
        shops:[],
        shop: {isUp: "1"},
        pageno: 1,
        pagesize: 16,
        total: 1,
        cart:{
          uid:sessionStorage.getItem('id'),
          gid: "",
          quantity:1
        },
        cartnum:0
        }
      },
      methods:{
        getObject(){
          //检查用户是否登录，如果没有登录，就不做异步调用
          if(this.user.id!=null){
            //异步获取数据，根据id查询用户
            this.$axios.get("queryUserById.action/"+this.user.id,null).
            then(response=>{
              this.user = response.data;
            }).
            catch()
          }else {
            this.user= {
              id:null
            };
          }
        },
        logout(){
          //注销账号，清空sessionStorage数据
          sessionStorage.clear();
          //更换当前路由路径
          this.$router.push("/Login");
        },
        loadshoptype(){
          this.$axios.get("shopType/shopType.action")
            .then(res => {
              this.shoptypes=res.data;
            })
            .catch(err => {
              alert(err)
            })
        },
        getShopData(){
          //组装数据
          var params = new URLSearchParams();
          params.append("pageno", this.pageno);
          params.append("pagesize", this.pagesize);
          Object.keys(this.shop).forEach(item => {
            params.append(item, this.shop[item]);
          })
          this.$axios.get("shop/shop.action",{params: params})
            .then(res => {
             res.data.records.forEach(item=>{
               item.imags[0].imagUrl=this.$store.state.path+item.imags[0].imagUrl;
              })
                this.shops = res.data.records;
                this.total = res.data.total;
            })
            .catch(err => {
              alert(err)
            })
        },
        searchipt(searchtxt){
          this.$router.push({
            name:'shopXq',
            params:{
              searchtxt:searchtxt
            }
          });
        },
        tztjgwcar(shopId){
          this.$router.push({path:'tjgwcar/'+shopId});
        },
        tzgwcar(){
          if (this.user.id!=null){
            this.$router.push("/gwcar");
          }else {
            this.$router.push("/Login");
          }
        },
        fenlentzshopXq(typeid){
          this.$router.push({
            name:'shopXq',
            params:{
              typeid:typeid
            }
          });
        },
        getgwCartnum(){
          if(this.user.id!=null) {
            this.$axios.get("cart/querygwCartnum.action/" + this.user.id)
              .then(res => {
              this.cartnum = res.data;
            })
              .catch(err => {
              alert(err)
            })
          }else {
            this.cartnum= 0;
          }
        },
        addCart(gid) {
          //加入购物车
          if (this.user.id!=null){
            this.cart.gid=gid;
            this.$axios.post("cart/cart.action",this.cart)
              .then(res => {
                if (res.data.code==1){
                  this.$notify({
                    title: '加入成功',
                    message: res.data.msg,
                    type: 'success',
                    position: 'bottom-right'
                  });
                  this.getgwCartnum();
                }else if(res.data.code==2){
                  this.$notify.error({
                    title: '加入失败',
                    message: res.data.msg,
                    position: 'bottom-right'
                  });
                }else {
                  this.$notify.error({
                    title: '加入失败',
                    message: res.data.msg,
                    position: 'bottom-right'
                  });
                }
              })
              .catch(err => {
                this.$notify.error({
                  title: '失败',
                  message: res.data.msg,
                  position: 'bottom-right'
                });
              })
          }else {
            this.$router.push("/Login");
          }
        },
        goUserMain(){
        //  去用户中心
          this.$router.push("/userMainView");
        }
      },
      created() {
        this.getObject();
        this.loadshoptype();
        this.getgwCartnum();
        this.getShopData();
      }
  }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .shopsItem{
    margin-bottom: 15px;
  }
</style>
